<div class="max-width-container">
  <div class="enlarged-container">
    <div class="grants-title-row">
      <h1>{{ 'DESCRIPTIONS.AUTHORIZATIONS.TITLE' | translate }}</h1>
      <a mat-icon-button href="https://zitadel.com/docs/concepts/structure/managers" rel="noreferrer" target="_blank">
        <mat-icon class="icon">info_outline</mat-icon>
      </a>
    </div>
    <p class="sub cnsl-secondary-text max-width-description">{{ 'DESCRIPTIONS.AUTHORIZATIONS.DESCRIPTION' | translate }}</p>
    <cnsl-user-grants
      *ngIf="grantContext === UserGrantContext.NONE"
      [displayedColumns]="[
        'select',
        'user',
        'org',
        'projectId',
        'type',
        'creationDate',
        'changeDate',
        'state',
        'roleNamesList',
        'actions',
      ]"
      [disableWrite]="(['user.grant.write$'] | hasRole | async) === false"
      [disableDelete]="(['user.grant.delete$'] | hasRole | async) === false"
      [refreshOnPreviousRoutes]="['/grant-create']"
    >
    </cnsl-user-grants>

    <cnsl-user-grants
      *ngIf="grantContext === UserGrantContext.OWNED_PROJECT"
      [context]="UserGrantContext.OWNED_PROJECT"
      [projectId]="projectId"
      [refreshOnPreviousRoutes]="['/grant-create/project/' + projectId]"
      [disableWrite]="(['user.grant.write$', 'user.grant.write:' + projectId] | hasRole | async) === false"
      [disableDelete]="(['user.grant.delete$', 'user.grant.delete:' + projectId] | hasRole | async) === false"
    >
    </cnsl-user-grants>
  </div>
</div>
